<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>权限分配</title>
	<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	<script src="../../../component/layui/layui.js"></script>
	<script src="../../../component/pear/pear.js"></script>
	<style>
		.layui-tab-title {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 997;
			background: #fff;
			height: 50px !important;
		}

		.layui-tab-title .layui-this:after {
			height: 51px;
		}

		.layui-tab-title li {
			height: 50px;
			line-height: 50px;
		}

		.layui-tab-content {
			position: absolute;
			top: 50px;
		}

		.margin-bottom {
			margin-bottom: 10px;
		}
	</style>
</head>

<body>
	<form class="layui-form" action="" lay-filter="form">
		<div class="mainBox">
			<div class="main-container">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<ul class="layui-tab-title">
						<li class="layui-this">菜单权限</li>
						<li>接口权限</li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<div class="pear-btn-group margin-bottom">
								<button type="button" id="CheckAllMenuBtn" lay-click="checkallmenu"
									class="pear-btn pear-btn-xs"><i class="icon pear-icon pear-icon-check-item"></i>
									全选</button>
								<button type="button" id="UnCheckAllMenuBtn" lay-click="uncheckallmenu"
									class="pear-btn pear-btn-xs" style="display: none;"><i
										class="icon pear-icon pear-icon-column-vertical"></i> 全不选</button>
								<button type="button" id="OpenMenuBtn" lay-click="openmenu" class="pear-btn pear-btn-xs"
									style="display: none;"><i class="icon pear-icon pear-icon-arrow-down-bold"></i>
									展开</button>
								<button type="button" id="CloseMenuBtn" lay-click="closemenu"
									class="pear-btn pear-btn-xs"><i
										class="icon pear-icon pear-icon-arrow-right-bold"></i> 收起</button>
							</div>
							<div id="menuTree"></div>
						</div>
						<div class="layui-tab-item">
							<div class="pear-btn-group margin-bottom">
								<button type="button" id="CheckAllSecurityBtn" lay-click="checkallsecurity"
									class="pear-btn pear-btn-xs"><i class="icon pear-icon pear-icon-check-item"></i>
									全选</button>
								<button type="button" id="UnCheckAllSecurityBtn" lay-click="uncheckallsecurity"
									class="pear-btn pear-btn-xs" style="display: none;"><i
										class="icon pear-icon pear-icon-column-vertical"></i> 全不选</button>
								<button type="button" id="OpenSecurityBtn" lay-click="opensecurity"
									class="pear-btn pear-btn-xs" style="display: none;"><i
										class="icon pear-icon pear-icon-arrow-down-bold"></i>
									展开</button>
								<button type="button" id="CloseSecurityBtn" lay-click="closesecurity"
									class="pear-btn pear-btn-xs"><i
										class="icon pear-icon pear-icon-arrow-right-bold"></i> 收起</button>
							</div>
							<div id="securityTree"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="button-container">
				<button type="submit" class="pear-btn pear-btn-sm pear-btn-primary" lay-submit="" lay-filter="save">
					<i class="icon pear-icon pear-icon-select-bold"></i>
					提交
				</button>
				<button type="button" lay-click="layerclose" class="pear-btn pear-btn-sm">
					<i class="icon pear-icon pear-icon-close-bold"></i>
					关闭
				</button>
			</div>
		</div>
	</form>
</body>

</html>

<script>
	layui.use(['form', 'jquery', 'context', 'permission', 'popup', 'tree', 'util', 'common', 'button', 'eleTree'], function () {
		var form = layui.form;
		var $ = layui.jquery;
		var context = layui.context;
		var popup = layui.popup;
		var tree = layui.tree;
		var util = layui.util;
		var common = layui.common;
		var button = layui.button;
		var eleTree = layui.eleTree;

		var basePath = context.get("base-path");
		var currentId = common.getQueryString("id");

		var eleTree_menuTree;
		var eleTree_securityTree;

		$.ajax({
			url: basePath + "/api/system/role/getrolepermissionlist",
			data: JSON.stringify({ Id: currentId }),
			success: function (result) {
				eleTree_menuTree = eleTree.render({
					elem: "#menuTree",
					data: result.data.menuTreeList,
					showCheckbox: true,
					defaultExpandAll: true,
					checkOnClickNode: true,
					expandOnClickNode: false,
					defaultCheckedKeys: result.data.menuIds
				});

				eleTree_securityTree = eleTree.render({
					elem: "#securityTree",
					data: result.data.securityTreeList,
					showCheckbox: true,
					defaultExpandAll: true,
					checkOnClickNode: true,
					expandOnClickNode: false,
					defaultCheckedKeys: result.data.securityList
				});
			}
		})

		form.on("submit(save)", function (data) {
			var btn = button.load({ elem: "button[lay-filter=save]" });
			$.ajax({
				url: basePath + "/api/system/role/setrolepermission",
				data: JSON.stringify({
					id: currentId,
					menuIds: eleTree_menuTree.getChecked(false, true).map(o => o.id),
					securityList: eleTree_securityTree.getChecked(false, true).map(o => o.id)
				}),
				success: function (result) {
					btn.stop(function () {
						if (result.succeeded) {
							popup.success("权限配置成功", function () {
								parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
								parent.layui.table.reload("table");
							});
						} else {
							popup.failure(JSON.stringify(result.errors));
						}
					})
				}
			})
			return false;
		});

		util.event('lay-click', {
			layerclose: function (othis) {//关闭当前弹窗
				parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
			},
			checkallmenu: function (othis) {//菜单全选
				eleTree_menuTree.setCheckAll();
				$("#CheckAllMenuBtn").hide();
				$("#UnCheckAllMenuBtn").show();
			},
			uncheckallmenu: function (othis) {//菜单全不选
				eleTree_menuTree.unCheckNodes();
				$("#CheckAllMenuBtn").show();
				$("#UnCheckAllMenuBtn").hide();
			},
			openmenu: function (othis) {//菜单展开
				eleTree_menuTree.expandAll();
				$("#OpenMenuBtn").hide();
				$("#CloseMenuBtn").show();
			},
			closemenu: function (othis) {//菜单折叠
				eleTree_menuTree.unExpandAll();
				$("#OpenMenuBtn").show();
				$("#CloseMenuBtn").hide();
			},
			checkallsecurity: function (othis) {//接口权限全选
				eleTree_securityTree.setCheckAll();
				$("#CheckAllSecurityBtn").hide();
				$("#UnCheckAllSecurityBtn").show();
			},
			uncheckallsecurity: function (othis) {//接口权限全不选
				eleTree_securityTree.unCheckNodes();
				$("#CheckAllSecurityBtn").show();
				$("#UnCheckAllSecurityBtn").hide();
			},
			opensecurity: function (othis) {//接口权限展开
				eleTree_securityTree.expandAll();
				$("#OpenSecurityBtn").hide();
				$("#CloseSecurityBtn").show();
			},
			closesecurity: function (othis) {//接口权限折叠
				eleTree_securityTree.unExpandAll();
				$("#OpenSecurityBtn").show();
				$("#CloseSecurityBtn").hide();
			},
		});

	})
</script>